<template>
  <el-header
    height="48px"
    style="padding:0px"
    class="gui_menu-bar-position_3U1T0 menu-bar_menu-bar_JcuHF box_box_2jjDp"
  >
    <div class="menu-bar_main-menu_3wjWH">
      <div class="menu-bar_file-group_1_CHX">
        <div class="menu-bar_menu-bar-item_oLDa-">
          <img
            alt="Scratch"
            class="menu-bar_scratch-logo_2uReV menu-bar_clickable_1g3uo"
            draggable="false"
            src="static/assets/216482a5c2c911722e53bc944421b26c.svg"
          >
        </div>
        <div
          class="menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB menu-bar_language-menu_2JEDx"
        >
          <div>
            <img
              class="menu-bar_language-icon_2DZV7"
              src="static/assets/1319094a51748798730f01d1dc0972ac.svg"
            >
            <img
              class="menu-bar_language-caret_16tau"
              src="static/assets/664d94e5cb8676c780c74c695f2e972c.svg"
            >
          </div>
        </div>
        <div
          class="menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <span>文件</span>
          <div class="menu-bar_menu-bar-menu_239MD"></div>
        </div>
        <ul class="menu_menu_1rWB9 menu_right_12vPx dropdown-menu" aria-labelledby="drop4">
          <li class="menu_menu-item_3ELPx menu_menu-section_1ai_E" onclick="discard()">
            <span>新建项目</span>
          </li>
          <li class="menu_menu-item_3ELPx menu_menu-section_1ai_E" onclick="openFile()">
            <span>从电脑中上传</span>
            <input type="file" accept=".sb, .sb2, .sb3" style="display: none;">
          </li>
          <li class="menu_menu-item_3ELPx" @click="saveXml()">
            <span>保存到电脑</span>
          </li>
        </ul>
        <div class="menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB">
          <div class>
            <span>编辑</span>
          </div>
          <div class="menu-bar_menu-bar-menu_239MD"></div>
        </div>
      </div>
      <div class="divider_divider_1_Adi menu-bar_divider_2VFCm"></div>
      <div aria-label="教程" class="menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB">
        <img
          class="menu-bar_help-icon_3Xtrt"
          src="static/assets/b433ee02a13fa2a12f7f7059f1f6729a.svg"
        >
        <span>教程</span>
      </div>
      <div class="divider_divider_1_Adi menu-bar_divider_2VFCm"></div>
      <div class="menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB inpu"  >
        <input
          type="text"
          class="form-control inp2"
          maxlength="100"
          placeholder="在此填写项目标题"
          tabindex="0"
          v-model="arduino"
          
        >
      </div>
      <div class="menu-bar_menu-bar-item_oLDa-"></div>
      <div class="menu-bar_menu-bar-item_oLDa-"></div>
    </div>
  </el-header>
</template>

<script>
export default {
  props: ['arduino'],
  methods: {
    saveXml() {
      saveXml(this.arduino)
    }
  }
};
</script>

<style>
.inpu {
  width: 192px;
}
.inp2 {
  height: 37px;
  background-color: hsla(0, 100%, 100%, 0.25); 
  border-color: hsla(215, 100%, 65%, 1);
}
inp2:hover {
    outline: none;
    border: 1px solid hsla(0, 100%, 100%, 0);
    -webkit-box-shadow: 0 0 0 calc(0.5rem * .5) hsla(0, 100%, 100%, 0.25);
    box-shadow: 0 0 0 calc(0.5rem * .5) hsla(0, 100%, 100%, 0.25);
    background-color: hsla(0, 100%, 100%, 1);
    color: hsla(225, 15%, 40%, 1);
}
inp2:hover {
    background-color: hsla(0, 100%, 100%, 0.5);
    border-color: hsla(215, 100%, 65%, 1);
}
i {
  cursor: pointer;
}
img {
  cursor: pointer;
}
</style>
<style type="text/css">
.menu-bar_menu-bar_JcuHF {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  /*
        For most things, we shouldn't explicitly set height, and let the
        content push the element to whatever fits. Using a fixed height
        instead, will help us subtract the value we assign from the body,
        adding up to a perfect 100%. This means we don't need to set
        overflow: hidden, which makes it hard to debug. border-box
        simplifies by all of this by removing padding from the equation.
    */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3rem;

  /*
        @todo: This adds ~20px in Chrome, when scrolling to the right,
        but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
        width: 100%;
    */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  background-color: hsla(215, 100%, 65%, 1);
  color: hsla(0, 100%, 100%, 1);
}
.menu-bar_main-menu_3wjWH {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.menu-bar_scratch-logo_2uReV {
  height: 1.6rem;
  vertical-align: middle;
}
.menu-bar_scratch-logo_2uReV.menu-bar_clickable_1g3uo {
  cursor: pointer;
}
.menu-bar_language-icon_2DZV7 {
  height: 1.5rem;
  vertical-align: middle;
}
.menu-bar_language-caret_16tau {
  margin: 0 0.125rem;
}
.menu-bar_language-menu_2JEDx {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 3rem;
}
.menu-bar_menu-bar-item_oLDa- {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.25rem;
  text-decoration: none;
  color: hsla(0, 100%, 100%, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  height: 3rem;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_hoverable_c6WFB {
  cursor: pointer;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_active_2Lfqh,
.menu-bar_menu-bar-item_oLDa-.menu-bar_hoverable_c6WFB:hover {
  background-color: hsla(0, 0%, 0%, 0.15);
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_growable_1sHWN {
  max-width: 12rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.menu-bar_title-field-growable_3qr4G {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 2rem;
}
.menu-bar_file-group_1_CHX {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_file-group_1_CHX .menu-bar_menu-bar-item_oLDa- {
  padding: 0 0.75rem;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_language-menu_2JEDx {
  padding: 0 0.5rem;
}
.menu-bar_menu-bar-menu_239MD {
  margin-top: 3rem;
  z-index: 41;
}
.menu-bar_feedback-link_1BnAR {
  color: hsla(215, 100%, 65%, 1);
  text-decoration: none;
}
.menu-bar_feedback-button_2rEcj {
  background-color: hsla(0, 100%, 100%, 1);
  height: 34px;
}
.menu-bar_divider_2VFCm {
  margin: 0 0.5rem;
  height: 34px;
}
.menu-bar_author-info_22Nub {
  margin-left: 0.25rem;
  margin-right: 0.6875rem;
}
.menu-bar_menu-bar-button_3IDN0 {
  height: 2rem;
}
.menu-bar_remix-button_2LQQc {
  background-color: hsla(163, 85%, 40%, 1);
}
.menu-bar_remix-button-icon_2E93U {
  height: 1.25rem;
}
.menu-bar_coming-soon_3yU1L > :not(.menu-bar_coming-soon-tooltip_20GhI) {
  opacity: 0.5;
}
.menu-bar_account-info-group_MeJZP {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_account-info-group_MeJZP .menu-bar_menu-bar-item_oLDa- {
  padding: 0 0.75rem;
}
.menu-bar_mystuff-icon_3DtcD {
  margin: 0 0.25rem;
  height: 1rem;
}
.menu-bar_help-icon_3Xtrt {
  margin-right: 0.35rem;
}
.menu-bar_account-nav-menu_3uu9p,
.menu-bar_mystuff-button_16jPf {
  padding: 0 0.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_profile-icon_2bJkI {
  margin: 0 0.25rem;
  width: 2rem;
  border-radius: calc(0.5rem / 2);
}
.menu-bar_dropdown-caret-icon_FkdUe {
  width: 0.5rem;
  height: 0.5rem;
}
[dir="ltr"] .menu-bar_dropdown-caret-icon_FkdUe {
  margin-left: 0.5rem;
}
[dir="rtl"] .menu-bar_dropdown-caret-icon_FkdUe {
  margin-right: 0.5rem;
}
.menu-bar_disabled_3x5sy {
  opacity: 0.5;
}
.menu-bar_mystuff_3RiSb > a {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
  padding-right: 10px;
  padding-left: 10px;
  width: 30px;
  overflow: hidden;
  text-indent: 50px;
  white-space: nowrap;
}
.menu-bar_mystuff_3RiSb > a:hover {
  background-size: 50%;
}
.menu-bar_mystuff_3RiSb > a {
  background-image: url("/images/mystuff.png");
}
</style>

<style type="text/css">
/* #E5F0FF */ /* #E9F1FC */ /* #D9E3F2 */ /* 90% transparent version of motion-primary */ /* #FFFFFF */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 15% transparent version of black */ /* #575E75 */ /* #4C97FF */ /* #3373CC */ /* 35% transparent version of motion-primary */ /* 10% transparent version of motion-primary */ /* #FF661A */ /* #E64D00 */ /* #CF63CF */ /* #BD42BD */ /* #FFAB19 */ /* #FF8C1A */ /* #0FBD8C */ /* #0FBD8C */ /* #FF8C1A */ /* #FFB366 */ /* #FF8C1A */ /* #0FBD8C */ /* #0B8E69 */ /* 35% transparent version of extensions-primary */ /* opaque version of extensions-transparent, on white bg */ /* lighter than motion-primary */
.divider_divider_1_Adi {
  border-right: 1px dashed hsla(0, 0%, 0%, 0.15);
}
</style>

<style type="text/css">
/* #E5F0FF */ /* #E9F1FC */ /* #D9E3F2 */ /* 90% transparent version of motion-primary */ /* #FFFFFF */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 15% transparent version of black */ /* #575E75 */ /* #4C97FF */ /* #3373CC */ /* 35% transparent version of motion-primary */ /* 10% transparent version of motion-primary */ /* #FF661A */ /* #E64D00 */ /* #CF63CF */ /* #BD42BD */ /* #FFAB19 */ /* #FF8C1A */ /* #0FBD8C */ /* #0FBD8C */ /* #FF8C1A */ /* #FFB366 */ /* #FF8C1A */ /* #0FBD8C */ /* #0B8E69 */ /* 35% transparent version of extensions-primary */ /* opaque version of extensions-transparent, on white bg */ /* lighter than motion-primary */ /* make sure to keep these in sync with other constants,
e.g. STAGE_DIMENSION_DEFAULTS in lib/screen-utils.js */ /* layout contants from `layout-constants.js` */ /*
    Contains constants for the z-index values of elements that are part of the global stack context.
    In other words, z-index values that are "inside" a component are not added here.
    This prevents conflicts between identical z-index values in different components.
*/ /* Toolbox z-index: 40; set in scratch-blocks */ /* tooltips should go over add buttons if they overlap */ /* monitors go over add buttons */ /* Block drag z-index: 50; set in scratch-blocks */ /* so it is draggable into other panes */ /* in most interfaces, the context menu is always on top */
.menu-bar_menu-bar_JcuHF {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  /*
        For most things, we shouldn't explicitly set height, and let the
        content push the element to whatever fits. Using a fixed height
        instead, will help us subtract the value we assign from the body,
        adding up to a perfect 100%. This means we don't need to set
        overflow: hidden, which makes it hard to debug. border-box
        simplifies by all of this by removing padding from the equation.
    */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3rem;

  /*
        @todo: This adds ~20px in Chrome, when scrolling to the right,
        but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
        width: 100%;
    */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  background-color: hsla(215, 100%, 65%, 1);
  color: hsla(0, 100%, 100%, 1);
}
.menu-bar_main-menu_3wjWH {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.menu-bar_scratch-logo_2uReV {
  height: 1.6rem;
  vertical-align: middle;
}
.menu-bar_scratch-logo_2uReV.menu-bar_clickable_1g3uo {
  cursor: pointer;
}
.menu-bar_language-icon_2DZV7 {
  height: 1.5rem;
  vertical-align: middle;
}
.menu-bar_language-caret_16tau {
  margin: 0 0.125rem;
}
.menu-bar_language-menu_2JEDx {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 3rem;
}
.menu-bar_menu-bar-item_oLDa- {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.25rem;
  text-decoration: none;
  color: hsla(0, 100%, 100%, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  height: 3rem;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_hoverable_c6WFB {
  cursor: pointer;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_active_2Lfqh,
.menu-bar_menu-bar-item_oLDa-.menu-bar_hoverable_c6WFB:hover {
  background-color: hsla(0, 0%, 0%, 0.15);
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_growable_1sHWN {
  max-width: 12rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.menu-bar_title-field-growable_3qr4G {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 2rem;
}
.menu-bar_file-group_1_CHX {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_file-group_1_CHX .menu-bar_menu-bar-item_oLDa- {
  padding: 0 0.75rem;
}
.menu-bar_menu-bar-item_oLDa-.menu-bar_language-menu_2JEDx {
  padding: 0 0.5rem;
}
.menu-bar_menu-bar-menu_239MD {
  margin-top: 3rem;
  z-index: 41;
}
.menu-bar_feedback-link_1BnAR {
  color: hsla(215, 100%, 65%, 1);
  text-decoration: none;
}
.menu-bar_feedback-button_2rEcj {
  background-color: hsla(0, 100%, 100%, 1);
  height: 34px;
}
.menu-bar_divider_2VFCm {
  margin: 0 0.5rem;
  height: 34px;
}
.menu-bar_author-info_22Nub {
  margin-left: 0.25rem;
  margin-right: 0.6875rem;
}
.menu-bar_menu-bar-button_3IDN0 {
  height: 2rem;
}
.menu-bar_remix-button_2LQQc {
  background-color: hsla(163, 85%, 40%, 1);
}
.menu-bar_remix-button-icon_2E93U {
  height: 1.25rem;
}
.menu-bar_coming-soon_3yU1L > :not(.menu-bar_coming-soon-tooltip_20GhI) {
  opacity: 0.5;
}
.menu-bar_account-info-group_MeJZP {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_account-info-group_MeJZP .menu-bar_menu-bar-item_oLDa- {
  padding: 0 0.75rem;
}
.menu-bar_mystuff-icon_3DtcD {
  margin: 0 0.25rem;
  height: 1rem;
}
.menu-bar_help-icon_3Xtrt {
  margin-right: 0.35rem;
}
.menu-bar_account-nav-menu_3uu9p,
.menu-bar_mystuff-button_16jPf {
  padding: 0 0.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar_profile-icon_2bJkI {
  margin: 0 0.25rem;
  width: 2rem;
  border-radius: calc(0.5rem / 2);
}
.menu-bar_dropdown-caret-icon_FkdUe {
  width: 0.5rem;
  height: 0.5rem;
}
[dir="ltr"] .menu-bar_dropdown-caret-icon_FkdUe {
  margin-left: 0.5rem;
}
[dir="rtl"] .menu-bar_dropdown-caret-icon_FkdUe {
  margin-right: 0.5rem;
}
.menu-bar_disabled_3x5sy {
  opacity: 0.5;
}
.menu-bar_mystuff_3RiSb > a {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
  padding-right: 10px;
  padding-left: 10px;
  width: 30px;
  overflow: hidden;
  text-indent: 50px;
  white-space: nowrap;
}
.menu-bar_mystuff_3RiSb > a:hover {
  background-size: 50%;
}
.menu-bar_mystuff_3RiSb > a {
  background-image: url("/images/mystuff.png");
}
</style>
<style type="text/css">
/* #E5F0FF */ /* #E9F1FC */ /* #D9E3F2 */ /* 90% transparent version of motion-primary */ /* #FFFFFF */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 25% transparent version of ui-white */ /* 15% transparent version of black */ /* #575E75 */ /* #4C97FF */ /* #3373CC */ /* 35% transparent version of motion-primary */ /* 10% transparent version of motion-primary */ /* #FF661A */ /* #E64D00 */ /* #CF63CF */ /* #BD42BD */ /* #FFAB19 */ /* #FF8C1A */ /* #0FBD8C */ /* #0FBD8C */ /* #FF8C1A */ /* #FFB366 */ /* #FF8C1A */ /* #0FBD8C */ /* #0B8E69 */ /* 35% transparent version of extensions-primary */ /* opaque version of extensions-transparent, on white bg */ /* lighter than motion-primary */
.menu_menu_1rWB9 {
  position: absolute;
  border: 1px solid hsla(0, 0%, 0%, 0.15);
  border-radius: 0 0 8px 8px;
  background-color: hsla(215, 100%, 65%, 1);
  padding: 0;
  margin: 0;
  min-width: 186px;
  max-width: 260px;
  overflow: visible;
  color: hsla(0, 100%, 100%, 1);
  -webkit-box-shadow: 0 8px 8px 0 hsla(0, 0%, 0%, 0.15);
  box-shadow: 0 8px 8px 0 hsla(0, 0%, 0%, 0.15);
}
.menu_menu_1rWB9.menu_left_1Zl7K {
  right: 0;
}
.menu_menu_1rWB9.menu_right_12vPx {
  left: 0;
}
.menu_menu-item_3ELPx {
  display: block;
  line-height: 34px;
  white-space: nowrap;
  padding: 0 10px;
  font-size: 0.75rem;
  margin: 0;
  font-weight: bold;
}
.menu_menu-item_3ELPx.menu_active_7GxsI,
.menu_menu-item_3ELPx:hover {
  background-color: hsla(0, 0%, 0%, 0.15);
}
.menu_menu-section_1ai_E {
  border-top: 1px solid hsla(0, 0%, 0%, 0.15);
}
</style>